<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<!-- 动态添加删除数据  [参考效果](https://www.jq22.com/webqd7039) -->

<body>
    <div id="app">
        <input type="text" v-model="nameIpt" placeholder="请输入姓名">
        <button @click="add">添加</button>
        <ul>
            <li v-for="(item, index) in list">
                {{item}}
                <button @click="abb(index)">删除</button>
            </li>

        </ul>

    </div>
</body>
<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            const nameIpt = ref('')
            const list = ref([])
            function add() {
                list.value.push(nameIpt.value)
                nameIpt.value = ''
            }
            function abb(index) {
                list.value.splice(index, 1)
            }
            return {
                nameIpt,
                list,
                add,
                abb
            }
        }

    }).mount('#app')
</script>

</html>